<template>
	<view>
		<view style="background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/e63bcf73858e37c567847ca55821ddfa.png) no-repeat;background-size: 100%;width: 100%;height: 414rpx;position: absolute;top:0rpx;left: 0;">

		</view>
		<view style="width: 92%;position: absolute;top:10rpx;left: 4%;padding-bottom: 30rpx;">
			<view style="width: 690rpx;height: 460rpx;background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20567%402x.png) no-repeat;background-size: 100%;margin-bottom: 26rpx;box-sizing: border-box;padding: 30rpx 30rpx 10rpx;position: relative;">
				<view style="overflow: hidden;">
					<view style="width: 23%;float: left;">
						<image :src="xq.main_logo" style="width: 116rpx;height: 116rpx;display: block;" mode=""></image>
					</view>
					<view style="width: 62%;float: left;">
						<view style="line-height: 40rpx;color: #000000;font-size: 36rpx;font-weight: 600;margin-top: 10rpx;">
							{{xq.name || ''}}
						</view>
						<view style="color: #999999;font-size: 22rpx;margin-top: 30rpx;line-height: 30rpx;">
							经营类目：{{xq.main_business || ''}}
						</view>
					</view>
					<view style="width: 15%;float: left;text-align: right;padding-top: 10rpx;">
						<text style="background: linear-gradient(0deg, #C18C26 0%, #E1AC4E 100%);color: #FFFFFF;font-size: 22rpx;padding: 2rpx 10rpx;">
							认证
						</text>
					</view>
				</view>
				<view style="line-height: 40rpx;color: #999999;font-size: 24rpx;margin-top: 30rpx;width: 85%;">
					联系人：{{xq.contact_name}}
				</view>
				<view style="line-height: 40rpx;color: #999999;font-size: 24rpx;width: 85%;">
					联系电话：<text v-if="is_vip==1">{{xq.mobile}}</text>
						<text v-if="is_vip!=1">{{xq.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}</text>
				</view>
				<text class="iconfont icon-zhuanfa" style="position: absolute;top: 50%;right: 30rpx;transform: translateY(-50%);font-size: 40rpx;"></text>
				<button open-type="share" style="position: absolute;top: 50%;right: 30rpx;transform: translateY(-50%);opacity: 0;width: 20rpx;height: 20rpx;" type="default"></button>
				<view style="width: 92%;margin: 0 auto;">
					<view style="display: flex;margin-top: 40rpx;color: #999999;font-size: 22rpx;justify-content: space-between;">
						<view >
							浏览量:{{xq.views_num || 0}}
						</view>
						<view >
							关注数：{{xq.attention_num || 0}}人
						</view>
						<view >
							联系次数：{{xq.contact_num || 0}}次
						</view>
					</view>
					<view style="margin: 30rpx 0;overflow: hidden;">
						<image v-for="(item,index) in xq.attention_client" :key='index' :src="item" class="tou" mode=""></image>
						<text style="color: #666666;font-size: 24rpx;line-height: 54rpx;float: right;">{{xq.attention_num || 0}}人关注</text>
					</view>
				</view>
			</view>
			<view v-if="list3.length>0">
				<u-swiper
				            :list="list3"
							height="160"
							radius="10"
				            indicator
				            indicatorMode="line"
				            circular
				    ></u-swiper>
			</view>
			<!-- <view style="display: flex;line-height: 80rpx;text-align: center;">
				<view style="flex: 1;position: relative;" @click="qi_huo(1)" :class="qh_type==1?'qiactive_type':'qi_type'">
					最新动态
				</view>
				<view style="flex: 1;position: relative;" @click="qi_huo(2)" :class="qh_type==2?'qiactive_type':'qi_type'">
					企业介绍
				</view>
				<view style="flex: 1;position: relative;" @click="qi_huo(3)" :class="qh_type==3?'qiactive_type':'qi_type'">
					留言互动
				</view>
			</view> -->
			<view style="position: fixed;left: 0;bottom: 0;width: 100%;background-color: #FFFFFF;">
				<view style="width: 100%;box-sizing: border-box;padding: 30rpx;display: flex;">
					<view @click="lianxi" style="flex: 2;">
						<view style="width:100%;height: 60rpx;line-height: 60rpx;border-radius: 30rpx;text-align: center;background-color: #1fb0ac;color: #FFFFFF;font-size: 24rpx;text-align: center;">
							联系企业
						</view>
					</view>

					<view @click="gz_cj" style="flex: 1;color: #000000;font-size: 26rpx;line-height: 60rpx;font-weight: 600;">
						<image v-if="xq.is_attention==2" src="@/static/index/icon_collect.png" style="width: 40rpx;height: 40rpx;float: left;margin: 10rpx 10rpx 10rpx 30rpx;" mode=""></image>
						<image v-if="xq.is_attention==1" src="@/static/index/icon_collect1.png" style="width: 40rpx;height: 40rpx;float: left;margin: 10rpx 20rpx;" mode=""></image>
						<text v-if="xq.is_attention==1" style="color: #F0AD4E;">已关注企业</text>
						<text v-if="xq.is_attention==2">关注该企业</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <image v-if="qh_type==3" @click="liu" src="https://frozen-info.oss-cn-shanghai.aliyuncs.com/uploads/miniapp/liu.png" style="width: 80rpx;height: 80rpx;position: fixed;right: 0;bottom: 400rpx;" mode=""></image> -->
		<!-- <uni-popup id="popup" ref="popup5" :type="type" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 600rpx;">
				<textarea   v-model="nei" placeholder="请输入您的留言" style="padding:20rpx;font-size: 24rpx;line-height: 40rpx;height: 200rpx;" />
				<view class="footer">
					<button @click="quxiao5" style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;"
					 type="default">取消</button>
					<button @click="huifu" lang="zh_CN" style="flex: 1;background-color: #1fb0ac;color: #FFFFFF;" open-type="getUserInfo">留言</button>

				</view>
			</view>
		</uni-popup> -->

		<uni-popup id="popup" ref="popup" :type="type_status" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 500rpx;">
				<view
					style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">
					提示
				</view>
				<view class="popup-content" style="text-align: center;font-size: 28upx;">请授权您的用户信息</view>
				<view class="footer">
					<button @click="quxiao"
						style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;"
						type="default">取消</button>
					<button @click="login" lang="zh_CN" style="flex: 1;background-color: #000000;color: #FFFFFF;"
						open-type="getUserInfo">确定</button>
					<!-- <button @click="submitLink" type="default" class="submit">确认提交</button> -->
				</view>
			</view>
		</uni-popup>
		<uni-popup id="popup" ref="popup1" :type="type_status" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 500rpx;">
				<view
					style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">
					提示
				</view>
				<view class="popup-content" style="text-align: center;font-size: 28upx;">请授权您的手机号</view>
				<view class="footer">
					<button @click="quxiao1"
						style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;"
						type="default">取消</button>
					<button @getphonenumber="login1" style="flex: 1;background-color: #000000;color: #FFFFFF;"
						open-type="getPhoneNumber">确定</button>

				</view>
			</view>
		</uni-popup>
		<noLoginToast ref="noLoginToast"/>
    <callPhone ref="callPhone" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list3: [],
				qh_type:1,
				id:'',
				xq:{},
				page:1,
				list:[],
				kk:false,
				enmpy:false,
				type:'center',
				nei:'',
				type_status:'center',
				is_vip:0
			}
		},
		// onReachBottom: function() {
		// 	if(this.qh_type==1){
		// 		if (this.enmpy) {
		// 			return
		// 		} else {
		// 			this.gengxin()
		// 		}
		// 	}else if(this.qh_type==3){
		// 		if (this.enmpy) {
		// 			return
		// 		} else {
		// 			this.liuyan()
		// 		}
		// 	}

		// },
		onLoad(option) {
			this.id=option.id
			// this.gengxin()
			this.qyxq()
		},
		onShow() {
			this.userinfo()
		},
		// onShareAppMessage: function(e) {
		// 				// let title = '恭喜dog.东西获得成功'
		// 				let that=this
		// 				return {
		// 					title: this.xq.shop_name,
		// 					path:'/pages/wenzhang/qyxq?id='+this.id,

		// 				}
		// 			},
		methods:{
			userinfo: function() {
				this.post('api/client/info', '', true).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.is_vip = res.data.is_vip
					}
				})
			},
			quxiao1: function() {
				this.$refs.popup1.close()
			},
			login1: function(e) {
				console.log(e)
				let that = this
				this.$refs.popup1.close()
				uni.login({
					provider: 'weixin',
					success: (code) => {
						console.log(code)
						this.post('api/wechat/phone', {
							code: code.code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						}, true).then(res => {
							console.log(res, '123455')
							if (res.code == 1) {
								uni.setStorageSync('mobile', res.data.phoneNumber)
								uni.setStorageSync('mobile2',res.data.mobile2)
							}else{
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
								})
							}

						})

					}
				})
			},

			// 用户信息
			async yonghu_xx(id){
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					console.log('%c [ isHasMobile ]-452', 'font-size:13px; background:pink; color:#bf2c9f;', isHasMobile)
					if (!isHasMobile) {
						return
					}
				}
				uni.navigateTo({
					url:'/fenbao/pages/wenzhang/yhxx?id='+id
				})
			},



			// 联系企业
			async lianxi(){
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					console.log('%c [ isHasMobile ]-452', 'font-size:13px; background:pink; color:#bf2c9f;', isHasMobile)
					if (!isHasMobile) {
						return
					}
				}
					if(this.is_vip==1){
						this.callPhone(this.xq.mobile)
						// uni.makePhoneCall({
						// 	phoneNumber: this.xq.mobile //仅为示例
						// });
					}else if(this.is_vip==0){
						uni.showModal({
							title: '提示',
							content: '只有会员才可以拨打电话,请前去开通会员！',
							success: function (res1) {
								if (res1.confirm) {
									uni.navigateTo({
										url:'vip'
									})
								} else if (res1.cancel) {

								}
							}
						});
					}else if(this.is_vip==2){
						uni.showModal({
							title: '提示',
							content: '只有会员才可以拨打电话,请前去续费会员！',
							success: function (res1) {
								if (res1.confirm) {
									uni.navigateTo({
										url:'xufei'
									})
								} else if (res1.cancel) {

								}
							}
						});
					}
			},
			callPhone(phoneNumber) {
				console.log(phoneNumber)
				this.$refs.callPhone.open(phoneNumber)
			},

			// 企业详情
			qyxq(){
				this.post('api/bazaar/shop_info',{id:this.id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.xq=res.data
						this.list3=res.data.main_images_arr
					}
				})
			},
			// 关注企业
			async gz_cj(){
				let that=this
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					console.log('%c [ isHasMobile ]-452', 'font-size:13px; background:pink; color:#bf2c9f;', isHasMobile)
					if (!isHasMobile) {
						return
					}
				}
				that.post('api/bazaar/attention',{id:that.id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						if(res.data){
							that.xq.is_attention=1
						}else{
							that.xq.is_attention=2
						}
					}
				})
			},
			// 拉黑企业
			lahei(){
				this.post('api/client/black_firm',{firm_id:this.id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						setTimeout(function(){
							uni.switchTab({
								url:'/pages/index/index'
							})
						},1500)
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.footer {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #f4f4f4;
		margin-top: 30rpx;
		padding-bottom: 20rpx;

		button {
			margin: 0 auto;
			width: 100%;
			background-color: #19BE6B;
			// width: 200upx;
			border-radius: 10upx;
			font-size: $uni-font-size-sm;
			// padding: 22upx 34upx;
			height: 80upx;
			font-size: 30rpx;
			line-height: 80upx !important;
			// line-height: 1;
			color: #FFFFFF;
		}

		button:after {
			border: 0;
		}
	}
	page{
		background-color: #F8F8F8!important;
		padding-bottom: 150rpx;
		font-family: Demibold;
	}
	.tu>view {
		margin: 10rpx 0;
	}

	.tu>view:nth-child(3n+2) {
		margin: 10rpx 30rpx;
	}
	.fenlei{
		width: 100%;
		margin-top: 26rpx;
		height: 350rpx;
		background: url(https://dyeego.oss-cn-beijing.aliyuncs.com/uploads/20220325/dbfaf5dddb188c6274941398431f8080.png) no-repeat;
		background-size: 100%;
		box-sizing: border-box;
		padding: 50rpx 0;
	}
	.tui_mei{
		color: #666666;
		font-size: 28rpx;
		font-weight: 500;
	}
	.tui_active{
		color: #000000;
		font-size: 28rpx;
		font-weight: 600;
	}
	.tou{
		width: 54rpx;
		height: 54rpx;
		float: left;
		border-radius: 50%;
		margin-left: -20rpx;
	}
	.tou:first-child{
		margin-left: 0;
	}

	.qi_type{
		color: #999999;
		font-size: 30rpx;
		font-weight: 500;
	}
	.qiactive_type{
		color: #000000;
		font-size: 30rpx;
		font-weight: 600;
	}
	.qiactive_type::after {
	     content: ''; // 必须
	     position: absolute;
	     left: 50%;
	     bottom: 0rpx;
		 transform: translateX(-50%);
	     width: 60rpx;
	     height: 6rpx;
	     background-color: #0078FF;
	}
	.footer {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #f4f4f4;
		margin-top: 30rpx;
		padding-bottom: 20rpx;

		button {
			margin: 0 auto;
			width: 100%;
			background-color: #19BE6B;
			// width: 200upx;
			border-radius: 10upx;
			font-size: $uni-font-size-sm;
			// padding: 22upx 34upx;
			height: 80upx;
			font-size: 30rpx;
			line-height: 80upx !important;
			// line-height: 1;
			color: #FFFFFF;
		}

		button:after {
			border: 0;
		}
	}
</style>
